import React, { Component } from 'react'
import { Form, Input, Button } from 'antd'
import { login, getUserInfo } from '../../api/user'
import router from '../../router/routerConfig'
import { FilterRoute } from '../../utils'
import { connect } from 'react-redux'
import './login.css'

class Login extends Component {
    // 登录 ==>  获取用户信息  ==>  获取视图信息(后端)

    // 登录 ==>  获取用户信息  ==>  前端来处理路由视图
    onFinish = (values) => {
        login(values).then(res => {
            console.log(res)
            sessionStorage.setItem('token', res.data.token)
            // 登录完成以后再获取用户信息
            // 401 没有权限
            getUserInfo().then(res => {
                sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))
                let status = res.data.data.identity_text
                let arr = FilterRoute(router, status)
                // 改变routerlist  [] ==> [有路由信息]
                this.props.setRouter(arr)
                this.props.history.push('/home')
            })
        }) 
    }

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }
    render() {
        return (
            <div className="login">
                <div className="login-wraper">
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={ this.onFinish }
                        onFinishFailed={ this.onFinishFailed }
                        autoComplete="off"
                    >
                        <Form.Item
                            label="账号"
                            name="user_name"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入账号',
                                }
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="user_pwd"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                }
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}

let mapStateToProps = (state) => {
    const { routerList } = state
    return {
        routerList
    }
}

let mapDispatchToProps = (dispatch) => {
    return {
        setRouter(arr) {
            dispatch({ type: "SET_ROUTER_LIST", arr })
        }
    }
}

Login = connect(mapStateToProps, mapDispatchToProps)(Login)

export default Login
